<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="createVidoe()">创建视频</button>
        <button onclick="flyTo()">flyTo</button>
        <button onclick="rotate()">rotate</button>
        <button onclick="updateUrl()">updateUrl</button>
        <button onclick="play()">play</button>
        <button onclick="pause()">pause</button>
        <button onclick="videoxxx()">vidoe的操作</button>
        <button onclick="removeVideo()">移除</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>

    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            camera: {
                "position": { "x": 119.31907430634027, "y": 26.04736545103955, "z": 1398.4488609218674 }, "angle": { "heading": 355.71, "pitch": -71.51, "roll": 6.282556191725895 },
                duration: 3,
                complete: () => {
                    console.log("飞行结束了");
                }
            },
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });

        function createVidoe() {
            const option = {
                name: "视频融合",
                entity: {
                    hierarchy: [
                        [119.315097, 26.052506, 0],
                        [119.317196, 26.0529451, 0],
                        [119.3174004, 26.0518783, 0],
                        [119.315403, 26.0512385, 0]
                    ],
                    perPositionHeight: true,
                    stRotation: false
                },
                video: {
                    url: "../videos/1.mp4",
                    autoplay: true,
                    loop: true,
                    muted: false,
                    poster: "./images/world.jpg",
                },
            }
            videoLayer = new cpc.VideoEntity(option);
            map.add(videoLayer);
        }
        function flyTo() {
            videoLayer.flyTo(1);
        }
        function rotate() {
            videoLayer.stRotation -= 10;
        }
        function updateUrl() {
            // videoLayer.url =  "./videos/扩散模拟.mp4";
            videoLayer.url = "../videos/big_buck_bunny.mp4";
        }
        function play() {
            videoLayer.video.play();//video就是一个dom对象，支持所有对videoDOM对象的所有操作
        }
        function pause() {
            videoLayer.video.pause()
        }
        function videoxxx() {
            console.log("视频总长", videoLayer.video.duration);
            console.log("当前播放位置", videoLayer.video.currentTime);
        }
        function removeVideo() {
            // 参数为：是否销毁,销毁不能再添加到map
            videoLayer.removeByMap(true);
        }

    </script>
</body>

</html>